<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        *{
        	margin:0;padding: 0;
        }
        li
        {
        	list-style: none;
        }
        .body
        {
        	width:800px;height:400px;margin:50px auto;position: relative;
        }
        .left,.right
        {
        	width:100px;height:400px;
        }
        .left
        {
        	position: absolute;left:0;
        }
        .center
        {
        	position:absolute;left:100px;
        }
        .right
        {
        	position: absolute;right:0px;
        }
        ul
        {
        	float: left;
        }
        img
        {
        	width:600px;height: 400px;position: absolute;top:0;
        }
        .left li,.right li
        {
        	height:78px;line-height:78px;text-align: center;border:1px solid #ccc;cursor: pointer;
        }
        .left li:hover,.right li:hover
        {
           background: pink;
        }
	</style>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<script type="text/javascript">
        //要实现的效果，鼠标移入左边导航显示对应的图片，鼠标移入右边导航显示对应的图片
        //结构：左右li各5个   中间li有10个，里面每个li有一张图片
        //对应关系：左边导航下标 0-4，对应图片下标0-4
        //          右边导航下标 0-4， 对应图片下标5-9
        
        $(function(){
        	//给左侧li注册鼠标移入事件  
        	//使用子类选择器 > 
        	$(".left>li").mouseenter(function() {
        		//找到下标对应的图片0-4
        		var idx = $(this).index();    //根据当前li找到对应的下标，使用index()方法
        		//找到对应的图片显示，其他的 隐藏
        		$(".center>li").eq(idx).show().siblings().hide();
        	});

            //给右侧导航注册鼠标移入事件
        	$(".right>li").mouseenter(function() {
        		//找到下标对应的图片0-4
        		var idx = $(this).index() + 5;    //根据当前li找到对应的下标，使用index()方法
        		//找到对应的图片显示，其他的 隐藏
        		$(".center>li").eq(idx).show().siblings().hide();
        	});
        });

	</script>
</head>
<body>

    <div class="body"> 
    	<ul class="left">
    		<li>鱼</li>
    		<li>虾</li>
    		<li>螺</li>
    		<li>蟹</li>
    		<li>海星</li>
    	</ul>
    	<ul class="center">
    		<li>
    			<img src="images/fish.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/xia.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/luo.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/pangxie.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/haixing.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/dangao.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/niunai.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/binggan.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/shupian.jpg" alt="">
    		</li>
    		<li>
    			<img src="images/latiao.jpg" alt="">
    		</li>
    	</ul>
    	<ul class="right">
    		<li>蛋糕</li>
    		<li>牛奶</li>
    		<li>饼干</li>
    		<li>薯片</li>
    		<li>辣条</li>

    		
    	</ul>

    </div>
	
</body>
</html>